import React, {useState} from 'react';
import {Row, Col, Card, Typography, Divider, Collapse, Descriptions, Button, Flex} from 'antd';
import {CaretRightOutlined} from '@ant-design/icons';
import styles from './styles/OrderConfirm.module.less';

const {Title, Text} = Typography;
const {Panel} = Collapse;

interface OrderConfirmProps {
  orders: any[];
  totalAmount: number;
  onChoosePayment: () => void;
}

function getOrderStatusText(status: string) {
  const statusMap: Record<string, string> = {
    '1': '新订单',
    '2': '已派单',
    '3': '送货中',
    '4': '已收货',
    '5': '退货',
    '6': '完成'
  };
  return statusMap[status] || status;
}


const OrderConfirm: React.FC<OrderConfirmProps> = ({orders, totalAmount, onChoosePayment}) => {
  const [activeKeys, setActiveKeys] = useState<string[]>([]);
  const [hoveredCard, setHoveredCard] = useState<string | null>(null);

  const handlePanelChange = (keys: string | string[]) => {
    setActiveKeys(Array.isArray(keys) ? keys : [keys]);
  };

  return (
    <div className={styles.container}>
      <Row gutter={[16, 16]}>
        {orders.map((order, index) => (
          <Col span={12} key={order.id}>
            <div
              className={`${styles.orderWrapper} ${
                activeKeys.includes(order.id) ? styles.active : ''
              } ${hoveredCard === order.id ? styles.hovered : ''}`}
              onMouseEnter={() => setHoveredCard(order.id)}
              onMouseLeave={() => setHoveredCard(null)}
            >
              <Collapse
                bordered={false}
                activeKey={activeKeys}
                onChange={handlePanelChange}
                expandIcon={({isActive}) => (
                  <CaretRightOutlined
                    className={`${styles.collapseIcon} ${
                      isActive ? styles.rotated : ''
                    }`}
                  />
                )}
                className={styles.orderCollapse}
              >
                <Panel
                  key={order.id}
                  showArrow={true}
                  header={
                    <div className={styles.cardHeader}>
                      <div className={styles.headerContent}>
                        <Text strong className={styles.orderNumber}>
                          订单号: {order.id}
                        </Text>
                        <Button type={'text'} size={"small"} className={styles.orderIndex}>订单 {index + 1}</Button>
                      </div>
                      <Title level={5} className={styles.orderTitle}>
                        {order.title}
                      </Title>
                      <div className={styles.orderSummary}>
                        <Text type="secondary">客户: {order.customerName}</Text>
                        <Text strong type="danger" className={styles.orderAmount}>
                          ¥{order.paidAmount?.toFixed(2)}
                        </Text>
                      </div>
                    </div>
                  }
                  className={styles.orderPanel}
                >
                  <div className={styles.orderDetails}>
                    <Descriptions column={1} size="small">
                      <Descriptions.Item label="联系人">
                        {order.contactName || '暂无'}
                      </Descriptions.Item>
                      <Descriptions.Item label="联系电话">
                        {order.phone || '暂无'}
                      </Descriptions.Item>
                      <Descriptions.Item label="送货地址">
                        {order.address || '暂无'}
                      </Descriptions.Item>
                      <Descriptions.Item label="下单时间">
                        {order.orderTime || '未知'}
                      </Descriptions.Item>
                      <Descriptions.Item label="订单状态">
                        {getOrderStatusText(order.orderStatus)}
                      </Descriptions.Item>
                    </Descriptions>

                    <Divider dashed className={styles.detailDivider}/>

                    <Text strong className={styles.detailTitle}>商品明细</Text>
                    {order.items?.map((item: any) => (
                      <div key={item.productId} className={styles.productItem}>
                        <Text className={styles.productName}>
                          {item.productName} ({item.modelType})
                        </Text>
                        <Text className={styles.productPrice}>
                          ¥{item.unitPrice} × {item.number} = ¥{item.payablePrice}
                        </Text>
                      </div>
                    ))}
                  </div>
                </Panel>
              </Collapse>
            </div>
          </Col>
        ))}
      </Row>

      <Divider className={styles.divider}/>

      <div className={styles.totalSection}>
        <Text strong>共 {orders.length} 笔订单</Text>
        <Title level={4} className={styles.totalAmount}>
          应付总额: <Text type="danger">¥{totalAmount.toFixed(2)}</Text>
        </Title>
      </div>
      <Flex justify={'end'} style={{marginTop: 20}}>
        <Button type="primary" onClick={onChoosePayment}>
          选择支付方式
        </Button>
      </Flex>
    </div>
  );
};


export default OrderConfirm;
